import React,{memo} from "react";
import { connect } from "react-redux";
import * as actionTypes from '../../../pages/shopping/store/actionCreators'
import { Context } from './SecondaryContentStyle'
import Lazyload from 'react-lazyload'
import loading from '../../../assets/mainIconfont/loading.gif'

const SecondaryContent = (props) => {
  const { list } = props
  
  const {setAddCar,selectGoods} = props
  return (
    <Context>
      {

        list.map((item,index) => {
          // console.log(item.imgsrc);
          // console.log(item.id);
          return (
            <div className="card" key={item.id} onClick={setAddCar.bind(null,list[index],selectGoods)}>
              <div className="image">
                <Lazyload height={100} placeholder={
                  // loading 优化
                  <img width="100%" height="100%" src={loading} />
                }>
                  <img src={item.imgsrc} alt="" />
                </Lazyload>
              </div>
              <div className="text">
                <div className="title">{item.name}</div>
                <div className="price">￥{item.price}</div>
              </div> 
            </div>
        )
        })
      }

    </Context>
  )
}
const mapStateToPorps = (state) => {
	return {
    selectGoods: state.shopping.selectGoods
	}
}

const mapStateToDispatch = (dispatch) => {
	return {
    // 定义，onClick点击使用
    setAddCar(data,selectGoods){
      if (selectGoods.findIndex((item) => data.id == item.id) == -1) {
        dispatch(actionTypes.getSelectGoods(data)) 
      }else {
        let index = selectGoods.findIndex((item) => data.id == item.id)
        dispatch(actionTypes.getSelectGoodsCount(data, index))
      }
       
    }
	}
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(SecondaryContent))